<template>
    <div>
        <div class="logo">
            <img :src="logo" />
        </div>
        <div>
            <van-form @submit="onSubmit">
                <van-field
                    v-model="mobile"
                    name="mobile"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ pattern: m_pattern, message: '请填写正确的手机号' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ pattern: p_pattern, message: '密码长度只少6个' }]"
                />
                <div style="margin: 16px;">
                    <van-button square block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import logo from "@/assets/logo.png";
import Vue from "vue";
import { Form, Field, Button, Toast } from "vant";
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
export default {
    data() {
        return {
            mobile: "",
            password: "",
            m_pattern: /^1[3-9]\d{9}$/,
            p_pattern: /[\s\S]{6,}/,
            logo,
        };
    },
    methods: {
        // 表单提交按钮触发的处理程序
        onSubmit(values) {
            // 发起网络请求请求nodejs
            // 如果参数直接就是values，则该请求为post形式json请求
            this.$http.post("http://127.0.0.1:8000/api/v1/user/login", values).then((ret) => {
                if (ret.error > 0) {
                    // 出错了
                    Toast.fail(ret.msg);
                } else {
                    Toast.success(ret.msg);
                    setTimeout(() => {
                        // 判断是否有来源地址
                        if (this.$route.query.goto) {
                            this.$router.push(this.$route.query.goto);
                        } else {
                            this.$router.push("/center");
                        }
                    }, 2000);
                }
            });
        },
    },
    created() {
        // 进入该组件隐藏底部导航
        this.$store.commit("common/setIsShow", false);
    },
    beforeDestroy() {
        // 离开该组件显示底部导航
        this.$store.commit("common/setIsShow", true);
    },
};
</script>

<style lang="scss" scoped>
.logo {
    margin-top: 150px;
    margin-bottom: 100px;
    text-align: center;
}
</style>
